<template>
	<view class="goods-info-wrapper">
		<view class="goods-info-banner">
			<view class="goods-info-back-icon flex-c" @click="back">
				<uni-icons type="back" size="22" color="#fff"></uni-icons>
			</view>
			<view class=" ">
				<swiper indicator-dots circular autoplay indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#EB5883"  class="swiper-box"  
				style="height: 744rpx;">
					<swiper-item v-for="(item ,index) in goodsInfo.detailImage" :key="index" >
						<view class="swiper-item" style="height: 744rpx;">
							<image :src="item" style="width: 750rpx; height: 744rpx;" mode="aspectFill" @click="previewImage(index)"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="goods-info-price-desc conteainer-public-style mg24">
			<view style="display: flex;justify-content: space-between;">
				<!-- <span  class="goods-price color-theme" >
					<text class="fz30">￥</text> {{ goodsInfo?.productDetail?.sellingPrice }}
				</span> -->
				<!-- <span>销量:少字段</span> -->
			</view>
			<view class="goods-name">
				{{ goodsInfo.name }}
			</view>
			<view class="goods-name fz28" v-if="goodsInfo?.productDetail && goodsInfo?.productDetail.length">
				<view class="">
					<text class="text-underline color999 fz26">原价：￥{{ goodsInfo?.productDetail[currentSpec]?.originalPrice}}</text>
					
				</view>
				<view class="flex-c mt15">
					<text class="fz26">到手价：</text> <text class="color-theme fz32">￥{{ goodsInfo?.productDetail[currentSpec]?.sellingPrice}}</text>
					<text class="fz26 ml30">押金：</text><text class="color-theme fz32">￥{{ goodsInfo?.productDetail[currentSpec]?.cashPledge}}</text>
				</view>
			</view>
			
			<view class="goods-desc fz26 gray-color">
				<rich-text :nodes="goodsInfo.description"></rich-text>
			</view>
		</view>
		
		<uni-popup ref="specNode" type="message">
			<view class="selector-spec-content public-popup">
				<view class="flex-c" style="padding-bottom: 20rpx;">
					<image :src="goodsInfo.listImage" style="width: 160rpx;height: 160rpx;border-radius: 12rpx; min-width: 160rpx;" mode=""></image>
					<view class="ml20" style=""> 
						<view class="fz26" v-if="goodsInfo.productDetail?.length">
							<view class="fz30">
								<text></text><text>{{goodsInfo.productDetail[currentSpec].name || '-'}}</text> 
							</view>
							<view class="mt25 mb10">
								<text class="text-underline color999 fz26">原价：￥{{ goodsInfo?.productDetail[currentSpec]?.originalPrice}}</text>
								
							</view>
							<view class="mb20">
								<text>到手价：</text><text class="color-theme pr20">￥ {{goodsInfo.productDetail[currentSpec].sellingPrice}}</text>
								<text class="ml30">押金：</text><text class="color-theme">￥ {{goodsInfo.productDetail[currentSpec].cashPledge}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="location flex-c-s fz26 mt15 mb30" v-if="oprationType === 'buy' && location.id" @click="toggleLocation">
					<view class="flex-c">
						<uni-icons type="location" size="25" color="#eb5480"></uni-icons>
						<view class="ml10">
							<view class="">
								{{ location.names }} {{ location.phone }}
							</view>
							<view class="color666">
								{{ location.Province || location.province || '' }} {{ location.city }} {{ location.prefecture }} {{ location.street }}
							</view>
						</view>
					</view>
					<view class="ml30">
						<uni-icons type="right" size="20" color="#666"></uni-icons>
					</view>
				</view>
				<view class="mt15 mb30 fz26 flex-c-s" v-if="oprationType === 'buy' && goodsInfo.businessType === 1 && !location.id">
					<view class="flex-c">
						<uni-icons type="info" size="24" color="#EB5883"></uni-icons><text class="color-theme">当前无可用的地址</text>
					</view>
					<view class="flex-c" @click="toggleLocation">
						<text>去添加</text>
						<uni-icons type="right" size="22" color="#666"></uni-icons>
					</view>
					<!-- <button class="public-large-btn" @click="confirmSpec">+ 去添加收货地址</button> -->
				</view>
				<view class="fz30 pb20">
					选择规格：
				</view>
				<view class="more-specs-wrapper fz26 pb20" v-if="goodsInfo.productDetail?.length">
					<scroll-view scroll-y="true" style="max-height: 600rpx;">
						<view class="goods-specs-item-list"
						v-for="(item, i) of goodsInfo?.productDetail" :key="item.specId" 
						:class="[ i === currentSpec ? 'active-spec' : '']" @click="selectorSpec(item, i)">
							<view class="goods-specs-item text-flemp1">
								<!-- {{item.specValue}} -->
								<text></text><text>{{item.name}}</text>
								（<text v-for="(s, si) of item.specCombo" :key="s.specId">
								{{ `${s.specName}:${s.specValue}` }} 
								<text v-if="si < item.specCombo.length - 1"> + </text> 
								</text>）
							</view> 
						</view>
					</scroll-view> 
				</view>
				<button class="public-large-btn" @click="confirmSpec">确 定</button>
			</view>
		</uni-popup>
					
		<view class="bottom-wrapper">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getStoreProductInfo } from '@/http/shop'
import { getDefaultAddress, getAddressDetail, getAllAddress } from '@/http/my'

import type { IStoreGoods, IUserInfo, IAddress } from '@/types'
var qiyuModule = uni.requireNativePlugin("Netease-QiyuModule")
export default defineComponent({
	setup() {
		const back = () => {
			uni.navigateBack()
		}
		const specNode = ref()
		const state = reactive({
			currentSpec: 0,
			goodsInfo: {} as IStoreGoods,
			location: {} as IAddress | any,
			oprationType: 'experience' as 'experience' | 'buy',
			options: [
				{
					icon: 'shop',
					text: '店铺',
					//info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, 
				{
					icon: 'chat',
					text: '客服'
				},  
			],
			customButtonGroup: [] as Array<{text: string, backgroundColor: string, color: string}>,
			userInfo: {} as IUserInfo,
		})
		
		onLoad((ctx) => { 
			if(ctx!.id) {
				getProductInfo(ctx!.id)
			}
			getLocation()
			
			uni.$on('updateLocation',function(data){ 
				 state.location.id = data.id
				 getLocationInfo()
			})
		})
		
		// watch(() => state.location.id, (v1) => { 
		// 	getLocationInfo()
		// })
		
		const getProductInfo = async (id: number) => {
			let res = await getStoreProductInfo(id)
			if(res.code === 0) {
				state.goodsInfo = res.data
				state.goodsInfo.description = state.goodsInfo.description.replace('<img ', '<img style="width: 100%;height: auto" ')
				if(state.goodsInfo?.productDetail?.length) {
					state.goodsInfo?.productDetail.forEach((item, i) => {
						if(item.isDefault) {
							state.currentSpec = i
						}
					}) 
				}
				
				if(state.goodsInfo.businessType === 2) {
					state.customButtonGroup = [
						{
							text: '立即体验',
							backgroundColor: 'linear-gradient(90deg, #f9dee8, #f9dee8)',
							color: '#EB5883'
						},
					]
				} else if (state.goodsInfo.businessType === 1) {
					state.customButtonGroup = [{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #eb5883, #eb5883)',
						color: '#fff'
					}]
					getLocationInfo()
				}
				// console.log(res);
			}
		}
		
		const getLocation = async () => {
			let res = await getDefaultAddress() 
			if(res.code === 0) {
				state.location = res.data
			} 
		}
		
		const getLocationInfo = async () => {
			if(!state.location.id!) return;
			let res = await getAddressDetail(state.location.id!) 
			if(res.code === 0) {
				state.location = res.data
			} else {
				uni.showToast({ title: '切换地址失败', icon: 'none'})
			}
		}
		
		onShow(() => {
			uni.getStorage({
				key: 'userInfo',
				success(data) {
					state.userInfo = JSON.parse(data.data)
				}
			})
			getAllLocation()
		})
		
		const getAllLocation = async () => {
			let res = await getAllAddress({
				page: 1,
				pageSzie: 1
			})
			if(res.code === 0) {
				if(!res.data?.list.length) {
					state.location = {}
				} 
			}
		}
		
		const buttonClick = (e: any) => {
			if(!state.userInfo.nickName) {
				uni.showToast({ title: '请先登录', icon: 'error'})
				return
			}
			if(e.content.text == '立即体验' ) {
				state.oprationType = 'experience'
				specNode.value.open('bottom')  
			}
			if(e.content.text == '立即购买') {
				state.oprationType = 'buy'
				specNode.value.open('bottom') 
				
			}
		}
		const confirmSpec = () => {
			if(!state.goodsInfo.productDetail?.length) {
				uni.showToast({ title: '请选择规格', icon: 'error' })
				return
			}
			if(!state.location.id) {
				uni.showModal({
					title: '提示',
					content: '您当前没有收货地址信息，是否前往添加',
					success({ confirm }) {
						if(confirm) {
							toggleLocation()
						}
					}
				})
			} else {
				specNode.value.close()
				uni.navigateTo({
					url: `/pages/shopPackge/confirmOrder/yuyueconfirmOrder?id=${state.goodsInfo.id}&spec=${state.currentSpec}&locationId=${state.oprationType=='buy' ? state.location.id : ''}`
				})
			} 
		}
		
		const onClick = (e:any) => {
			if(e.index == 0){
				uni.navigateBack()
			}
			if(e.index == 1){
				qiyuModule.openServiceActivity({
					title: '客服会话',
					source: {
						title: 'xad-y89',
						ios_sendProduct: false,
					},
				})
			}
		}
		const selectorSpec = (item: any, index: number) => {
			state.currentSpec = index
		}
		
		const previewImage = (index: number) => {
			uni.previewImage({
				urls: state.goodsInfo.detailImage,
				current: index
			})
		}
		const toggleLocation = () => {
			uni.navigateTo({
				url: '/pages/myPackge/addressManage/address?select=1'
			})
		}
		return {
			back,
			buttonClick,
			onClick,
			selectorSpec,
			specNode,
			confirmSpec,
			previewImage,
			toggleLocation,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background: #f8f8fa; }
</style>
<style scoped lang="scss">
.goods-info-wrapper{
	padding-bottom: 160rpx;
	.goods-info-banner{
		height: 744rpx;
		position: relative;
		.goods-info-back-icon{
			position: absolute;
			left: 24rpx;
			top: 50rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: rgba(0, 0, 0, .5);
			border-radius: 50%;
			z-index: 1000;
			justify-content: center;
		}
	}
	.goods-info-price-desc{
		.goods-price{
			font-size: 48rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}
		.goods-name{
			font-size: 32rpx;
			margin-bottom: 16rpx;
		}
		.goods-desc{
			image{
				width: 654rpx;
				height: 300rpx;
			}
			img{
				width: 654rpx;
				height: 300rpx; 
			}
		}
	}
	.goods-specs-item-list{
		padding: 16rpx;
		border: 1rpx solid #dfdfdf;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		&:last-child {
			margin-bottom: 0;
		}
		.spec-item-tags{
			margin: 0 12rpx 16rpx 0;
		}
		.goods-specs-item{
			padding: 6rpx 0;
		} 
	}
	.active-spec{
		border: 2rpx solid #EB5883;
		background-color: #f5f5f5;
		border-radius: 20rpx;
	}
	.spec-item{
		height: 34rpx;
		padding: 0 20rpx;
		border-radius: 17rpx;
		border: 1rpx solid #EB5883;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #EB5883;
	}
}
</style>